<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10.13作业</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 396px;
      height: 280px;
      margin: 0 auto;
      border: 1px solid black;
    }
    .title {
      width: 100%;
      height: 60px;
      display: flex;
    }
    .box1 {
      width: 132px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      /* background-color: aqua; */
    }
    .box2 {
      width: 132px;
      height: 60px;
      text-align: center;
      line-height: 60px;
    }
    .box3 {
      width: 132px;
      height: 60px;
      text-align: center;
      line-height: 60px;
    }
    .box1-active {
      background-color: aqua;
    }
    .content {
      width: 100%;
      height: 220px;
      /* background-color: blue; */
    }
  </style>
  <body>
    <div class="box">
      <div class="title">
        <div class="box1">标题一</div>
        <!-- <button class="box22">点击</button> -->
        <p class="box2">标题二</p>
        <p class="box3">标题三</p>
      </div>
      <div class="content"></div>
    </div>
    <script>
      let box1 = document.querySelector(".box1");
      let box2 = document.querySelector(".box2");
      let box3 = document.querySelector(".box3");
      let cont = document.querySelector(".content");

      box1.onclick = function () {
        box1.classList.toggle("box1-active");
        if (box1.classList.contains("box1-active")) {
          cont.classList.add("box1-active");
          box2.classList.remove("box1-active");
          box3.classList.remove("box1-active");
          cont.innerText = "内容一";
        } else {
          cont.classList.remove("box1-active");
        }
      };
      box2.onclick = function () {
        box2.classList.toggle("box1-active");
        if (box2.classList.contains("box1-active")) {
          cont.classList.add("box1-active");
          box1.classList.remove("box1-active");
          box3.classList.remove("box1-active");
          cont.innerText = "内容二";
        } else {
          cont.classList.remove("box1-active");
        }
      };
      box3.onclick = function () {
        box3.classList.toggle("box1-active");
        if (box3.classList.contains("box1-active")) {
          cont.classList.add("box1-active");
          box1.classList.remove("box1-active");
          box2.classList.remove("box1-active");
          cont.innerText = "内容三";
        } else {
          cont.classList.remove("box1-active");
        }
      };
    </script>
  </body>
</html>
